{% extends 'inventory/base.html' %}
{% load static %}

{% block title %}首页 - {{ block.super }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 统计卡片 -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="card bg-primary text-white mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">今日销售额</h6>
                            <h3 class="mb-0">¥{{ today_sales_amount|floatformat:2 }}</h3>
                        </div>
                        <div class="fs-1 opacity-50">
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="#">今日订单数: {{ today_sales }}</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-success text-white mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">商品总数</h6>
                            <h3 class="mb-0">{{ total_products }}</h3>
                        </div>
                        <div class="fs-1 opacity-50">
                            <i class="fas fa-box"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="#">库存不足: {{ low_stock_products }}</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-info text-white mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">会员总数</h6>
                            <h3 class="mb-0">{{ total_members }}</h3>
                        </div>
                        <div class="fs-1 opacity-50">
                            <i class="fas fa-users"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="#">本月新增: {{ new_members_month }}</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-warning text-white mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">销售总数</h6>
                            <h3 class="mb-0">{{ total_sales }}</h3>
                        </div>
                        <div class="fs-1 opacity-50">
                            <i class="fas fa-receipt"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="#">昨日销售: {{ yesterday_sales }}</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 左侧区域 -->
        <div class="col-lg-8">
            <!-- 销售趋势图 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">最近7天销售趋势</h5>
                </div>
                <div class="card-body">
                    <canvas id="salesChart" height="200"></canvas>
                </div>
            </div>
        </div>
        
        <!-- 右侧区域 -->
        <div class="col-lg-4">
            <!-- 当月生日会员 -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">{{ current_month }}月 生日会员</h5>
                        <a href="{% url 'birthday_members_report' %}" class="btn btn-light btn-sm">查看全部</a>
                    </div>
                </div>
                <div class="card-body card-scrollable p-0">
                    {% if birthday_members %}
                    <div class="list-group list-group-flush">
                        {% for member in birthday_members %}
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <div class="d-flex align-items-center">
                                    <div class="icon-circle bg-warning text-white me-2">
                                        <i class="fas fa-birthday-cake"></i>
                                    </div>
                                    <h6 class="mb-0">{{ member.name }}</h6>
                                </div>
                                <small class="text-muted">{{ member.phone }}</small>
                            </div>
                            <div class="text-end">
                                <div class="badge bg-primary">{{ member.birthday|date:"m-d" }}</div>
                                <div>
                                    <a href="{% url 'member_detail' member.id %}" class="btn btn-sm btn-outline-primary mt-1">
                                        <i class="fas fa-user me-1"></i> 详情
                                    </a>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="alert alert-info m-3">
                        <i class="fas fa-info-circle me-2"></i> 本月没有会员生日
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部三个卡片区域 -->
    <div class="row">
        <!-- 热销商品 -->
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="card-title mb-0">热销商品</h5>
                </div>
                <div class="card-body card-scrollable">
                    {% if top_products %}
                    <div class="list-group list-group-flush">
                        {% for product in top_products %}
                        <div class="list-group-item px-0">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">{{ product.product__name }}</h6>
                                <span class="badge bg-primary rounded-pill">{{ product.total_qty }}</span>
                            </div>
                            <small class="text-muted">销售额: ¥{{ product.total_amount|floatformat:2 }}</small>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted">暂无销售数据</p>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- 库存预警 -->
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header bg-danger text-white">
                    <h5 class="card-title mb-0">库存预警</h5>
                </div>
                <div class="card-body card-scrollable">
                    {% if low_stock_products > 0 %}
                    <div class="alert alert-warning mb-3">
                        <strong>注意：</strong> 有 {{ low_stock_products }} 个商品库存不足，其中 {{ out_of_stock_products }} 个商品已无库存！
                    </div>
                    <a href="#" class="btn btn-danger btn-sm">查看库存不足商品</a>
                    {% else %}
                    <div class="alert alert-success mb-0">
                        <i class="fas fa-check-circle me-2"></i> 所有商品库存充足
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- 最近操作日志 -->
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header bg-secondary text-white">
                    <h5 class="card-title mb-0">最近操作</h5>
                </div>
                <div class="card-body card-scrollable p-0">
                    {% if recent_logs %}
                    <div class="list-group list-group-flush">
                        {% for log in recent_logs %}
                        <div class="list-group-item">
                            <div class="d-flex align-items-center">
                                <div class="icon-circle 
                                    {% if log.operation_type == 'ADD' %}bg-success{% elif log.operation_type == 'CHANGE' %}bg-primary{% elif log.operation_type == 'DELETE' %}bg-danger{% else %}bg-info{% endif %} 
                                    text-white me-2" style="width: 28px; height: 28px; font-size: 12px;">
                                    <i class="fas 
                                        {% if log.operation_type == 'ADD' %}fa-plus{% elif log.operation_type == 'CHANGE' %}fa-edit{% elif log.operation_type == 'DELETE' %}fa-trash{% else %}fa-info{% endif %}">
                                    </i>
                                </div>
                                <div>
                                    <p class="mb-0">{{ log.details }}</p>
                                    <small class="text-muted">{{ log.timestamp|date:"m-d H:i" }} by {{ log.operator.username }}</small>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="alert alert-info m-3">
                        <i class="fas fa-info-circle me-2"></i> 暂无操作记录
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .icon-circle {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }
    
    /* 添加固定高度和滚动样式 */
    .card-scrollable {
        height: 250px;
        overflow-y: auto;
        scrollbar-width: thin;
    }
    
    /* 美化滚动条 */
    .card-scrollable::-webkit-scrollbar {
        width: 5px;
    }
    
    .card-scrollable::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .card-scrollable::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 5px;
    }
    
    .card-scrollable::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    /* 确保卡片有统一的高度 */
    .col-md-4 .card {
        height: 100%;
    }
    
    .col-md-4 .card-body {
        padding: 0.75rem;
    }
</style>

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // 销售趋势图
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('salesChart').getContext('2d');
        const salesChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [{% for day in sales_trend %}'{{ day.date }}'{% if not forloop.last %}, {% endif %}{% endfor %}],
                datasets: [{
                    label: '销售额',
                    data: [{% for day in sales_trend %}{{ day.amount }}{% if not forloop.last %}, {% endif %}{% endfor %}],
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 2,
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return '¥' + value;
                            }
                        }
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return '销售额: ¥' + context.parsed.y;
                            }
                        }
                    }
                }
            }
        });
    });
</script>
{% endblock %}
{% endblock %}